<template>
  <div class="login">
    <div class="login-title">
      <p>后台管理系统</p>
      <el-form ref="form" status-icon :rules="rules" :model="form">
        <el-form-item prop="user_name">
          <el-input v-model="form.user_name " placeholder="用户名"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input v-model="form.password" placeholder="密码"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="Login">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { login } from "../api/getData";
import { mapActions, mapState } from "vuex";
export default {
  data() {
    return {
      form: {
        user_name: "",
        password: "",
      },
      rules: {
        user_name: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 3,
            max: 12,
            message: "长度在 3 到 12 个字符",
            trigger: ["blur", "change"],
          },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 3,
            max: 12,
            message: "长度在 3 到 12 个字符",
            trigger: ["blur", "change"],
          },
        ],
      },
    };
  },
  mounted() {
    if (!this.adminInfo.id) {
      this.getAdminData();
    }
  },
  // 计算属性
  computed: {
    ...mapState(["adminInfo"]),
  },
  methods: {
    ...mapActions(["getAdminData"]),
    async Login() {
      this.$refs.form.validate(async (valid) => {
        console.log(valid);
        if (valid) {
          const data = await login(this.form);
          console.log(data);
          if (data.status == 1) {
            this.$message({
              type: "success",
              message: "登录成功",
            });
            this.$router.push('manage')
          } else {
            this.$message({
              type: "error",
              message: data.message,
            });
          }
        } else {
          this.$notify.error({
            title: "错误",
            message: "请输入正确的用户名及密码",
            offset: 100,
          });
          return false;
        }
      });
    },
  },
  watch:{
    adminInfo:function(newValue){
      console.log(newValue);
      if(newValue.id){
        this.$message({
          type:'success',
          message:'检测到您之前登录过，将自定登录'
        })
      }
    }
  }
};
</script>

<style lang="less" scoped>
@import "../style/mixin.less";
.login {
  width: 100%;
  height: 100%;
  background-color: #324057;
  .login-title {
    width: 400px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    // background: pink;
    p {
      font-size: 34px;
      color: #ffffff;
      text-align: center;
      margin-bottom: 50px;
    }
    .el-form {
      background: #ffffff;
      padding: 30px 20px 0;
      border-radius: 10px;
      .el-button {
        width: 100%;
        margin-bottom: 20px;
      }
    }
  }
}
</style>